<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/btm.css">
    <style>
        /*底部*/
        h4,h5{margin-top: 0px;margin-bottom: 0px;}

        .btm li:nth-child(3) a{color: #287EE1}

        /*顶部*/
        .top{width: 100%;height: 0.88rem;background: #fff;text-align: center;position: relative;}
        .top h4{text-align: center;height: 0.88rem;background: #01B0B8;color: #fff;font-size: 0.34rem;line-height: 0.88rem}
        .top .back{width: 0.25rem;height: 0.25rem;display: block;border-bottom: 2px solid #fff;
            border-left: 2px solid #fff;transform: rotate(45deg);position: absolute;left: 0.35rem;top:0.3rem;z-index: 100}


        /**/
        .list{width: 100%;height: auto;padding-left: 0.3rem;background: #fff}
        .list li{width: 100%;height: 2.6rem;position: relative;background: #fff;border-bottom: 1px solid #DEDEDE}
        .list li span:nth-child(3){left: 2.4rem;top:0.3rem;position: absolute;width: 4.34rem;font-size: 0.36rem;height: 0.89rem; line-height: 0.45rem;  overflow : hidden;
       color: #666 }
        .list li img:nth-child(1){left: 0.71rem;top: 0.32rem;position: absolute;width:1.42rem;height: 1.9rem}
        .list li .price{left: 2.4rem;bottom: 0.2rem;position: absolute;font-size: 0.32rem;width:2.2rem;height: 0.5rem;text-align: left;
        ;line-height: 0.5rem;color: #FC5E30}
        .list li .price a{color: red}
        .list li nav{top:1.3rem;left: 2.4rem;position: absolute;color: #999;font-size: 0.26rem}
        .list li nav a{color: #999}
        .mui-numbox{position: absolute;right: 0px;bottom: 0.2rem}






        .danxuan{width: auto;height: 0.7rem;display: inline-block;line-height:0.7rem;color: #469CFF;position: absolute;left: 0px;top:0.7rem;}
       .danxuan input[type=checkbox]{width: 0.4rem;height: 0.4rem;display:inline-block;display: none}

        .advice{height: 0.4rem;width: 0.4rem;display: inline-block;margin-right: 0.2rem;
            background-image: url("__PUBLIC__/Home/images/danxuan.png");
            background-repeat: no-repeat;
            background-position: center;
            vertical-align: middle;
            margin-top: -4px;
            border-radius: 0.4rem;
        }
        input[type="checkbox"]:checked + .advice{
            height: 0.4rem;width: 0.4rem;
            background-image: url("__PUBLIC__/Home/images/danxuan2.png");
            border-radius: 0.4rem;
        }



        /*结算栏*/
        .jiesuan{width: 100%;height: 1rem;background: #fff;position: fixed;bottom:0rem; }
        /*全选*/
        .quanxuan{width: auto;height: 0.7rem;display: inline-block;line-height:0.7rem;color: #469CFF;position: absolute;left: 0.35rem;top:0.15rem;
        font-size: 0.32rem}
        .jiesuan .pay{width: 2.3rem;height: 100%;color: #fff;text-align: center;line-height: 1rem;display: block;float: right;background: #469CFF;
            font-size: 0.27rem;}
        .jiesuan   .heji{float: right;margin-right: 0.1rem;font-size: 0.28rem;margin-top: 0.28rem}
        .jiesuan   .heji a{color: #FC683C;font-size: 0.3rem}


        .quanxuan input[type=checkbox]{width: 0.4rem;height: 0.4rem;display:inline-block;display: none}
        .advice{height: 0.4rem;width: 0.4rem;display: inline-block;margin-right: 0.2rem;
            background-image: url("__PUBLIC__/Home/images/danxuan.png");
            background-repeat: no-repeat;
            background-position: center;
            vertical-align: middle;
            margin-top: -4px;
            border-radius: 0.4rem;
        }
        input[type="checkbox"]:checked + .advice{
            height: 0.4rem;width: 0.4rem;
            background-image: url("__PUBLIC__/Home/images/danxuan2.png");
            border-radius: 0.4rem;
        }
    </style>
</head>
<body>


<div class="shopCar">

    <!--顶部栏-->
    <div class="top">
        <h4>购物车</h4>
        <span class="back"></span>
        <ul class="list">
            <li>
                <img src="__PUBLIC__/Home/images/dingdan-1.png" alt="">
                <span class="danxuan">
                         <input type="checkbox" name="type" id="adviceRadio1" value="1"  hidden/>
                        <label for="adviceRadio1" class="advice"></label>
                     </span>

                <span class="duohang">静安秋冬昂苏暖保暖靴子静安秋冬昂苏暖保暖靴子靴子静安秋冬昂苏暖保暖靴靴子静安秋冬昂苏暖保暖靴</span>
                <nav>颜色分类：<a>白色</a></nav>
                <span class="price">积分<a>1000</a></span>

                <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                    <input class="mui-numbox-input" type="number"/>
                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                </div>
        </li>

            <li>
                <img src="__PUBLIC__/Home/images/dingdan-1.png" alt="">
                <span class="danxuan">
                     <input type="checkbox" name="type" id="adviceRadio2" value="1"  hidden/>
                    <label for="adviceRadio1" class="advice"></label>
                 </span>

                <span class="duohang">静安秋冬昂苏暖保暖靴子静安秋冬昂苏暖保暖靴子靴子静安秋冬昂苏暖保暖靴靴子静安秋冬昂苏暖保暖靴</span>
                <nav>颜色分类：<a>白色</a></nav>
                <span class="price">积分<a>1000</a></span>

                <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                    <input class="mui-numbox-input" type="number" />
                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                </div>
            </li>


        </ul>



        <!--结算栏-->
        <div class="jiesuan">
                   <span class="quanxuan">
                     <input type="checkbox" name="type" id="adviceRadiol" value="1"   hidden/>
                    <label for="adviceRadio1" class="advice"></label>全选
                 </span>

               <a href="dingdan-detils.html" class="pay">去结算</a>
            <span class="heji">合计：积分<a>0</a></span>

        </div>

    </div>




</div>

<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
<script>

    $(".back").click(function () {
        window.history.back(-1);
    })
    <!--点击全选-->
    let allPrice;
    $(".quanxuan").click(function () {
       let stu=$(".quanxuan input[type=checkbox]").prop("checked");
        $(".danxuan input[name=type]").prop("checked",stu);


         if(!stu){
             $(".pay span ").html(0);
             $(".heji a ").html(0);
         }else{
             setAll();
             allPrice=0;
         }

    })
    // 点击单选
    $(".danxuan").click(function () {
          console.log($(this).find("input").prop("checked"));
        setAll();
    })
    //计算总价
     function setAll() {

            $(".list li").each(function (i,e) {
//                  console.log(i)
                   let stu2=$(this).find("input[type=checkbox]").prop("checked");
                  // console.log(stu2);
                if(stu2){
                    let num=$(this).find("input[type=number]").val();
                   let price= parseFloat($(".price a").html());
                    let jiage = num*price;
                    allPrice+=jiage;
//                    console.log(allPrice);
                }
            })
            $(".pay span ").html(allPrice);
            $(".heji a ").html(allPrice);
               allPrice=0;
     }
    setAll();


  //  点击加减商品
    $(".list button[type=button]").click(function () {
        console.log("000")
        setAll();
    })


</script>
</body>
</html>